<template>
    <navigator :url="`/pages/news_detail/news_detail?id=${newsId}`">
        <view class="h-news-card flex bg-white m-[30rpx] px-[30rpx] py-[28rpx]">
            <view class="mr-[20rpx] border-radius w-[108px] h-[108px]" v-if="item.image" style="overflow: hidden;">
				<image :src="item.image" style="width: 100%;height: 100%;" mode="aspectFill"></image>
            </view>
            <view class="news-card-content flex flex-col flex-1">
                <view class="news-card-content-title text-[16px] font-medium">{{ item.title }}</view>
                <view class="news-card-content-intro text-gray-400 text-[12px] mt-[20rpx] subtitle">
                    {{ item.desc }}
                </view>
            </view>
        </view>
    </navigator>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const props = withDefaults(
    defineProps<{
        item: any
        newsId: any
    }>(),
    {
        item: {},
        newsId: ''
    }
)
</script>

<style lang="scss" scoped>
.h-news-card {
	border-radius: 6px;
	.border-radius{
		border-radius: 6px
	};
	.subtitle{
		color: $u-tips-color;
	}
    &-content {
        &-title {
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        &-intro {
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
}
</style>
